<template>
	<view class="p-b-25">
		<cu-custom title="兴趣班课程设置" bgColor="rgba(255,255,255,0)" ></cu-custom>
		<view class="form-box form-detail bg-white p-15 m-15 ">
			<view class="fl">
				课程名<text class="c-red f-20">*</text>
			</view>
			<view class="right-in f-r">
				<input placeholder="例:2023上半年午托班"/>
			</view>
		</view>
		<view class="m-15 ">
			<view class="f-18 f-w-b">课程详情</view>
			<view class="form-box bg-white">
				<view class="form-detail   p-15 m-t-5 ">
					<view class="fl">
						辅导内容<text class="c-red f-20">*</text>
					</view>
					<view class="right-in f-r flex">
						<input placeholder="点击设置辅导内容"/><u-icon name="arrow-right" size="34rpx" color='#333'></u-icon>
					</view>
				</view>
				<view class="form-detail bg-white p-15 ">
					<view class="fl">
						授课方式<text class="c-red f-20">*</text>
					</view>
					<view class="right-in f-r flex">
						<input placeholder="请选择授课方式"/><u-icon name="arrow-right" size="34rpx" color='#333'></u-icon>
					</view>
				</view>
				<view class="form-detail bg-white p-15 ">
					<view class="fl">
						招生人数<text class="c-red f-20">*</text>
					</view>
					<view class="right-in f-r flex">
						<input placeholder="请填写招生人数"/>
					</view>
				</view>
				<view class="form-detail bg-white p-15 ">
					<view class="fl">
						每节课招生时长（分钟）<text class="c-red f-20">*</text>
					</view>
					<view class="right-in f-r flex">
						<input maxlength="40" placeholder="请填写时长"  style="width: 100px;"/>
					</view>
				</view>
				<view class="form-detail bg-white p-15 ">
					<view class="fl">
						总课时（共几节课）<text class="c-red f-20">*</text>
					</view>
					<view class="right-in f-r flex">
						<input placeholder="请填写课时"/>
					</view>
				</view>
				<view class="form-detail bg-white p-15 ">
					<view class="fl">
						总课程费<text class="c-red f-20">*</text>
					</view>
					<view class="right-in f-r flex">
						<input placeholder="点击设置课程费"/><u-icon name="arrow-right" size="34rpx" color='#333'></u-icon>
					</view>
				</view>
			</view>
			
		</view>
		<view class="m-15 ">
			<view class="f-18 f-w-b">开课时间设置</view>
			<view class="form-box bg-white">
				<view class="form-detail   p-15 m-t-5 ">
					<view class="fl">
						时间模式
					</view>
					<view class="right-in f-r flex">
						<input placeholder="设置学习模式"/><u-icon name="arrow-right" size="34rpx" color='#333'></u-icon>
					</view>
				</view>
				<view class="form-detail   p-15 ">
					<view class="fl">
						上课时间
					</view>
					<view class="right-in f-r flex">
						<input placeholder="设置上课时间"/><u-icon name="arrow-right" size="34rpx" color='#333'></u-icon>
					</view>
				</view>
				<view class="form-detail   p-15 ">
					<view class="fl">
						适用对象
					</view>
					<view class="right-in m-t-25 ">
						<textarea placeholder="请输入适用对象" maxlength="300" @input="descInput" 
                v-model="dataInfo" style="background: #f4f4f4; width: 100%; text-align: left; padding: 15px; height: 120px;"></textarea>
						<text
						                style="position: absolute;
										z-index: 99;
						                right: 70rpx;
										margin-top:-40rpx;
						                font-size:24rpx;
						                color: #999;">{{ start }}/300</text>
					</view>
				</view>
				<view class="form-detail   p-15 ">
					<view class="fl">
						学习目标
					</view>
					<view class="right-in m-t-25 ">
						<textarea placeholder="在此输入学习目标"  style="background: #f4f4f4; width: 100%; text-align: left; padding: 15px; height: 120px;"></textarea>
						
					</view>
				</view>
				<view class="form-detail   p-15 m-t-5 ">
					<view class="fl">
						授课老师
					</view>
					<view class="right-in f-r flex">
						<view class="uni-list-cell-db">
							<picker @change="bindPickerChange" :value="index" :range="array">
								<view class="uni-input">{{array[index]}}</view>
							</picker>
						</view>
					</view>
				</view>
				<view class="form-detail   p-15 m-t-5 ">
					<view class="fl">
						添加宣传视频
					</view>
					<view class="right-in f-r flex">
						<u-icon name="plus" size="34rpx" color='#333'></u-icon>
					</view>
				</view>
				<view class="form-detail   p-15 " style="border-bottom: 0;">
					<view class="fl">
						课程详情
					</view>
					<view class="right-in m-t-25 ">
						<textarea placeholder="请输入课程详情" maxlength="300" @input="descInput" 
				v-model="dataInfo" style="background: #f4f4f4; width: 100%; text-align: left; padding: 15px; height: 120px;"></textarea>
						<text
						                style="position: absolute;
										z-index: 99;
						                right: 70rpx;
										margin-top:-40rpx;
						                font-size:24rpx;
						                color: #999;">{{ start }}/300</text>
					</view>
				</view>
				<view class="form-detail   p-15 m-t-5 ">
					<view class="fl">
						<view class="example-body">
										<uni-file-picker limit="9"   title="上传照片" style="width: 300px; height: 300px;"></uni-file-picker>
									</view>
					</view>
					
				</view>
			</view>
			
		</view>
		<view class="uni-form-item uni-column in-text b-t-n b-u-c m-15 m-t-30 c-l m-b-30" style="padding-bottom: 30px;">
			<button> 发布课程</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			
			return {
				start: 0,
				array: ['莫老师', '刘老师', '巴老师', '黄老师'],
				index: 0,
				// date: currentDate,
				
				dataInfo: '',
				imageValue:[],
				formData: {
				// 正面
				obverseUrl: "",
				// 反面
				reverseUrl: "",
				},
				imageStyles: {
					width: 64,
					height: 64,
					border: {
						radius: '50%'
					}
				},
				listStyles: {
					// 是否显示边框
					border: true,
					// 是否显示分隔线
					dividline: true,
					// 线条样式
					borderStyle: {
						width: 1,
						color: 'blue',
						style: 'dashed',
						radius: 2
					}
				},
			}
		},
		methods: {
			bindPickerChange: function(e) {
			            console.log('picker发送选择改变，携带值为', e.detail.value)
			            this.index = e.detail.value
			        },
			descInput() {
						let txtVal = this.dataInfo.length;
						this.start = txtVal;
					},
			
					
		}
	}
</script>

<style lang="less" scoped>
@import '@/static/css/common.css';
.form-box{border-radius: 10px;}
.form-detail{  display: flow-root; border-bottom: 1px solid #f8f8f8;}
.right-in{ text-align: right;}
</style>
